<template>
  <div class="third-compon">
    <div class="list">
      <div class="titles">产出统计</div>
      <msui-charts :extra-option="chartsOption" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      value1: '',
      chartsOption: {
        tooltip: {
          trigger: 'axis'
        },
        grid: [{
          left: '4%',
          right: 0,
          bottom: '7%',
          top: '6%'
        }],
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            show: true,
            lineStyle: {
              color: "black",
              width: 0,
              type: "solid"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: "black",
              width: 0,
              type: "none"
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260, 218, 135, 147, 260, 147],
            type: 'bar'
          }
        ]
      },
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  },
}
</script>
<style scoped lang="less">
.third-compon {
  height: 100%;
  background: white;
  display: flex;
  padding: 20px;

  .list {
    flex: 1;
    position: relative;

    .form {
      position: absolute;
      top: -5px;
      right: 0;
      display: flex;
      z-index: 1000;
      align-items: center;
    }

    .el-tab {
      height: 100%;
      display: flex;
      flex-direction: column;

      ::v-deep .el-tabs__item {
        height: 20px;
        line-height: 20px;
      }

      ::v-deep .el-tabs__nav {
        transform: translateX(100px) !important;
      }

      ::v-deep .el-tabs__nav-wrap::after {
        background-color: white !important;
      }

      ::v-deep .el-tabs__content {
        flex: 1;

        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .titles {
      font-weight: bold;
      position: absolute;
      top: 0;
    }
  }
}</style>